<template>
    <div id="app">
        <form-create v-model="formData" v-model:api="formApi" :rule="formRules" @submit="handleSubmit" />

        <!-- 显示接口返回的消息的模态框 -->
        <div v-if="showModal" class="modal-overlay" @click="hideModal">
            <div class="modal-content" @click.stop>
                <h2 class="modal-title">接口返回消息</h2>
                <div class="modal-body">
                    <pre><strong>Status Code:</strong> {{ statusCode }}</pre>
                    <pre><strong>Response Data:</strong> {{ responseData }}</pre>
                    <pre><strong>Error Message:</strong> {{ errorMessage }}</pre>
                </div>
                <button class="modal-close" @click="hideModal">关闭</button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios'; // 引入 axios 库

// 表单数据
const formData = ref({});
// 表单 API 实例
const formApi = ref(null);
// 控制模态框的显示
const showModal = ref(false);
// 接口返回的消息
const responseData = ref('');
const statusCode = ref('');
const errorMessage = ref('');

// 表单规则
const formRules = ref([
  {
    "type": "input",
    "field": "VBELN",
    "title": "销售订单",
    "info": "",
    "$required": false,
    "_fc_id": "id_Fvwrm11jezyuboc",
    "name": "ref_Forrm11jezyubpc",
    "display": true,
    "hidden": false,
    "_fc_drag_tag": "input"
  }
]);

// 隐藏模态框的函数
const hideModal = () => {
    showModal.value = false;
};

// 提交表单的函数
const handleSubmit = async (data) => {
    console.log('提交的数据:', JSON.stringify(data, null, 2));
    try {
        const username = 'IT10';
        const password = '654321';
        const encodedCredentials = btoa(`${username}:${password}`);
        const response = await axios.post('/zjcpt/ZFM_JICAI_11C?sap-client=700', data, {
            headers: {
                'Content-Type': 'application/json',
                'Authorization': 'Basic ' + encodedCredentials
            }
        });

        // 调试信息
        console.log('接口返回完整响应:', response);

        // 处理接口的响应
        responseData.value = JSON.stringify(response.data, null, 2);
        statusCode.value = response.status;
        errorMessage.value = '';
        showModal.value = true; // 显示模态框
    } catch (error) {
        // 调试信息
        console.error('提交失败:', error);

        // 处理错误情况
        if (error.response) {
            console.log('错误响应:', error.response);
            responseData.value = JSON.stringify(error.response.data, null, 2);
            statusCode.value = error.response.status;
            errorMessage.value = error.response.data.message || '提交失败，请重试。';
        } else {
            responseData.value = '';
            statusCode.value = '';
            errorMessage.value = '提交失败，请重试。';
        }
        showModal.value = true; // 显示模态框
    }
};
</script>

<style scoped>
/* 样式可根据需要调整 */
.response-message {
    margin-top: 20px;
    color: #409eff;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    max-width: 80%;
    width: 600px;
    /* 适应屏幕宽度 */
    max-height: 80%;
    /* 适应屏幕高度 */
    overflow: auto;
    /* 添加滚动条 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    position: relative;
}

.modal-title {
    margin: 0;
    font-size: 1.5em;
    color: #333;
}

.modal-body {
    margin-top: 10px;
    color: #333;
    overflow-y: auto;
    /* 内部滚动条 */
}

.modal-body pre {
    white-space: pre-wrap;
    /* 保持换行 */
    word-break: break-word;
    /* 自动换行 */
    background: #f9f9f9;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: auto;
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #ff4d4d;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 1em;
}

.modal-close:hover {
    background: #e60000;
}
</style>